<template>

<!-- 
  15 hooks
  hooks: 让求和的数据和方法合在一起 
  hooks本质是一个个可以调用的函数  
-->
  <h2>当前求和为: {{ sum }} 放大后为: {{ bigSum }}</h2>
  <button @click="add">add</button>
  <hr>
  <img v-for="(dog, index) in dogList" :src="dog" :key="index" alt="">
  <br>
  <button @click="getDog">再来一只修勾</button>
</template> 

<script setup lang="ts" name="Pserson234">
// import { ref, reactive } from 'vue'
// import axios from 'axios'



// // https://dog.ceo/api/breed/pembroke/images/random

// // 数据
// let sum = ref(0)
// let dogList = reactive([
//   'https://images.dog.ceo/breeds/pembroke/n02113023_1616.jpg',
//   'https://images.dog.ceo/breeds/pembroke/n02113023_1482.jpg'

// ])

// // 方法
// const add = () => {
//   sum.value += 1
// }

// const getDog = async () => {
//   try {
//     let res =  await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
//     dogList.push(res.data.message)
//     // console.log(res.data.message)
//   }catch(error) {
//     // error -> 错误对象
//     alert(error)
//   }
// }

import useSum from '@/hooks/useSum'
import useDog from '@/hooks/useDog'

const { sum, add, bigSum } = useSum()
const { dogList, getDog } = useDog()
</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
img {
  height: 100px;
  margin-right: 10px;
}
</style>